<template>
  <div>
    <el-form
      ref="ruleForm"
      :model="ruleForm"
      :rules="rules"
      label-width="100px"
      class="demo-ruleForm"
      size="medium"
    >
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="楼栋名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="楼层" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="房间" prop="gender">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="设备编号" prop="name">
            <el-select
              v-model="ruleForm.gender"
              clearable
              placeholder="请选择"
              filterable
              style="width: 100%;"
            >
              <el-option :key="0" label="男" :value="0"></el-option>
              <el-option :key="1" label="女" :value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="房间类型" prop="gender">
            <el-select
              v-model="ruleForm.gender"
              clearable
              placeholder="请选择"
              filterable
              style="width: 100%;"
            >
              <el-option :key="0" label="男" :value="0"></el-option>
              <el-option :key="1" label="女" :value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="床位数" prop="gender">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="床位费用" prop="gender">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
          <el-form-item label="床位押金" prop="gender">
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="form-footer">
      <el-button type="primary" class="sureBtn" size="medium">提 交</el-button>
      <el-button type="info" class="setBtn" size="medium">取 消</el-button>
    </div>
  </div>
</template>
<script>
  export default {
    name: "Index",
    components: {},
    props: {
      data: {
        type: Object,
        default() {
          return {
            face: "",
            backface: "",
            type: [],
          };
        },
      },
    },
    data() {
      return {
        ruleForm: {
          face: "",
          backface: "",
          type: [],
        },
        rules: {},
        dataPickerBeforeTodayOptions: {
          disabledDate(time) {
            // return time.getTime() > Date.now();
          },
        },
      };
    },
    created() {},
    beforeDestroy() {},
    mounted() {
      // console.log(JSON.stringify(this.data));
      if (JSON.stringify(this.data) !== "{}") {
        this.ruleForm = this.data;
      }
    },
    methods: {
      handleClick(tab, event) {
        console.log(tab, event);
      },
      handleChange(value) {
        console.log(value);
      },
    },
  };
</script>
<style lang="scss" scoped>
  .el-tabs {
    ::v-deep {
      .el-tabs__header {
        margin-bottom: 24px;
      }
    }
  }

  .el-form-item {
    margin-bottom: 24px;
  }

  .selectClass {
    width: 100%;
  }

  .form-footer {
    padding-left: 100px;
  }

  .diver-title {
    margin-bottom: 24px;
    font-size: 16px;
    font-weight: bold;
    color: #333;
  }

  .tips {
    padding-left: 100px;
    margin-bottom: 24px;
    font-size: 16px;
    color: #ff4d50;
  }
</style>
